<template>
  <n-card :header-style="{ padding: '10px', background: '#F1F5FF', marginBottom: '10px' }"
    class="creativeadv-market-content">
    <template #header>{{ index }}.营销内容</template>
    <x-form ref="formRef" v-model:model="market" :rules="rules" label-placement="top" label-width="140">
      <n-form-item label="创建类型" path="mode">
        <n-button-group>
          <n-button key="0" :value="1" @click="changeMode(1)" label="创建新的广告" ghost
            :type="market.mode == 1 ? 'info' : undefined">创建新的广告</n-button>
          <n-button key="1" :value="2" label="引用已有广告" @click="changeMode(2)" ghost
            :type="market.mode == 2 ? 'info' : undefined">引用已有广告</n-button>
        </n-button-group>
      </n-form-item>
      <n-form-item label="营销内容" path="marketingGoal">
        <n-radio-group v-model:value="market.marketingGoal">
          <n-radio-button value="MARKETING_GOAL_PRODUCT_SALES" label="商品销售" />
        </n-radio-group>
      </n-form-item>
      <n-form-item label="推广产品" path="product">
        <n-radio-group :value="market.marketingTargetType" @update:value="changeMaketTagetType">
          <n-radio-button key="0" value="MARKETING_TARGET_TYPE_CONSUMER_PRODUCT" label="商品" />
          <n-radio-button key="1" value="MARKETING_TARGET_TYPE_WECHAT_CHANNELS_LIVE" label="视频号直播" />
        </n-radio-group>
      </n-form-item>
    </x-form>
  </n-card>

  <n-modal v-model:show="modal.show" preset="card" :bordered="false" title="引用已有广告" :style="{ width: '820px' }"
    :mask-closable="false">
    <n-scrollbar style="max-height: 600px;">
      <n-skeleton :repeat="6" text v-if="modal.loading"></n-skeleton>
      <n-list v-show="!modal.loading" :clickable="true" class="adgroup-list">
        <n-list-item class="adgroup-item" @click="selectAd(item)" v-for="(item, i) in modal.list" :key="i"
          :class="{ active: item.adgroupId === selectId }">
          <div>{{ item.adgroupName }}</div>
        </n-list-item>
      </n-list>
    </n-scrollbar>
    <template #footer>
      <div class="text-right">
        <n-button type="primary" @click="quoteAdv">确认</n-button>
      </div>
    </template>
  </n-modal>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { useStore } from '@/store';
import { useDialog, NCard, NModal, NButtonGroup, NFormItem, useMessage, NTag, NRadioGroup, NRadioButton, NButton, NScrollbar, NList, NListItem, NSkeleton, } from 'naive-ui';
import { XForm, XButton, XDataTable } from '@/components';
import { getUploadedAdvList } from '@/api/intelligent';
const emit = defineEmits(['quoteAdv', 'targetTypeChange'])
const store = useStore();
const dialog = useDialog();
const market = computed(() => store.state.adv.modal.market);
const accounts = computed(() => store.state.adv.accounts);
const modal = reactive<{ show: boolean, list: any, loading: boolean }>({
  show: false,
  list: [],
  loading: false,
})
const message = useMessage()
defineProps({
  index: {
    type: Number
  }
})

const rules = {
  // accounts: {
  //   type: 'any',
  //   required: true,
  //   validator(rule: FormItemRule, value: any) {
  //     if (!value.length) {
  //       return new Error('请至少选择一个账户!')
  //     }
  //     return true
  //   },
  //   trigger: ['change'],
  //   message: '请选择账户'
  // }
}

const selectId = ref(undefined);

function selectAd(item: any) {
  selectId.value = item.adgroupId;
}

function changeMaketTagetType(v: any) {

  dialog.warning({
    title: '警告',
    content: '该操作将清空当前正在编辑的广告版位和创意，是否继续?',
    positiveText: '继续',
    negativeText: '取消',
    onPositiveClick: () => {
      market.value.marketingTargetType = v;
      store.commit('adv/EMPTY_POSITION')
      store.commit('adv/EMPTY_CREATIVOR');
      // 如果是视频号直播类 清空版位
      if (v === 'MARKETING_TARGET_TYPE_WECHAT_CHANNELS_LIVE') {
        store.commit('adv/UPDATE_ADV_TARGET_VALUE', {
          path: ['position'],
          key: 'siteSet',
          value: []
        });
        store.commit('adv/UPDATE_ADV_TARGET_VALUE', {
          path: ['schedulePrice'],
          key: 'deepConversionType',
          value: undefined,
        })
        store.commit('adv/UPDATE_ADV_TARGET_VALUE', {
          path: ['schedulePrice'],
          key: 'deepConversionGoal',
          value: 2,
        });


      }
      // console.log('empty');
    },
    onNegativeClick: () => {

    }
  })



}

function changeMode(v: any) {
  if (v == 2) {
    if (!accounts.value.length) {
      message.warning('请先至少选择一个账户!')
      return;
    }
    showModal();
  }
  if (v == 1) {
    dialog.warning({
      title: '警告',
      content: '该操作将清空当前正在编辑的广告数据，是否继续?',
      positiveText: '继续',
      negativeText: '取消',
      onPositiveClick: () => {
        // market.value.mode = 1;
        emit('targetTypeChange', {
          // adgroupId: selectId.value,
          mode: 1
        })
      },
      onNegativeClick: () => {

      }
    })

  }
}

function showModal() {
  modal.show = true;
  getAdvs();
}

async function getAdvs() {
  modal.loading = true;
  const res = await getUploadedAdvList({
    accountCodeList: accounts.value.map(_ => _.accountCode)
  });
  modal.loading = false;
  modal.list = res.data;
}

function quoteAdv() {
  modal.show = false;
  if (!selectId.value) {
    market.value.mode = 1;
  } else {
    // market.value.mode = 2;
    emit('targetTypeChange', {
      adgroupId: selectId.value,
      mode: 2
    })
    // emit('quoteAdv', selectId.value)
  }

}



</script>
<style lang="scss" scoped>
@import '@/assets/styles/var.scss';

.adgroup-list {
  .adgroup-item.active {
    color: $primaryColor;
  }
}
</style>

<style lang="scss">
.creativeadv-market-content {
  .n-button:not(.n-button--disabled):hover {
    background-color: rgba(0, 0, 0, 0) !important;
  }

  .n-button:not(.n-button--disabled):hover .n-button__state-border {
    border: rgba(0, 0, 0, 0) !important;
  }
}
</style>
